import Navbar from '../../compoents/Navbar'
import { useNavigate } from 'react-router-dom'
import style from './index.module.css'

function Index() {
  const navigate = useNavigate()
  
  return (
    <div className={style.container}>
      <Navbar title='代寄' showBack onBack={()=>navigate(-1)} />
      
      <div className={style.content}>
        {/* 页面标题和申请记录 */}
        
        <div className={style.header}>
          <div className={style.titleSection}>
            <div className={style.titleBar}></div>
            <span className={style.titleText}>请选择代寄类型</span>
          </div>
          <div className={style.recordLink} onClick={() => navigate('/Record')}>
            申请记录
          </div>
        </div>

        {/* 服务选项卡片 */}
        <div className={style.cardsContainer}>
          {/* 门诊报告打印卡片 */}
          <div className={style.serviceCard} onClick={() => navigate('/ZhuYuan')}>
            <div className={style.cardIcon + ' ' + style.blueIcon}>
              <div className={style.calendarIcon}></div>
            </div>
            <div className={style.cardContent}>
              <div className={style.cardTitle}>门诊报告打印</div>
              <div className={style.cardSubtitle}>支持检查检验等报告</div>
            </div>
          </div>

          {/* 住院病案复印卡片 */}
          <div className={style.serviceCard} onClick={() => navigate('/BingLi')}>
            <div className={style.cardIcon + ' ' + style.redIcon}>
              <div className={style.printerIcon}></div>
            </div>
            <div className={style.cardContent}>
              <div className={style.cardTitle}>住院病案复印</div>
              <div className={style.cardSubtitle}>住院病历资料复印</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Index
